<template>
  <div class="tab-content-detail" ref="tabContentDetail">
    <grid-view
      :cols="2"
      :lineSpace="15"
      :vMagin="28"
      v-if="categoryDetail"
      :gridViewWidth="gridViewWidth"
      ref="gridView"
    >
      <goods-list-item
        v-for="item in categoryDetail"
        :key="item.id"
        :goodsItem="item"
        class="detailGoodItem"
      />
    </grid-view>
  </div>
</template>

<script>
import GridView from "components/common/gridview/GridView";
import GoodsListItem from "components/content/goods/GoodsListItem";
export default {
  name: "TabContentDetail",
  components: {
    GridView,
    GoodsListItem,
  },
  data() {
    return {
      gridViewWidth: 0,
    };
  },
  props: {
    categoryDetail: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    this.gridViewWidth = this.$refs.tabContentDetail.clientWidth;
  },
};
</script>

<style scoped>
</style>
